<template>
  <div class="layout">
    <Layout>
      <Drawer width="200px" placement="left" :closable="false" v-model="value2" :mask="false">
        <Sider>
          <Menu></Menu>
        </Sider>
      </Drawer>
      <Layout :style="marginLeft">
        <Header @menuOpen="handleZk">
          <Header></Header>
        </Header>
        <Content class="content">
          <Breakcrumb></Breakcrumb>
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import Header from "../components/Header";
import Menu from "../components/Menu";
import Breakcrumb from "../components/Breakcrum";

export default {
  data() {
    return {
      value2: true,
      marginLeft: "margin-left:200px"
    };
  },
  // 注册主键
  components: {
    Header,
    Menu,
    Breakcrumb
  },
  methods: {
    handleOpen() {
      console.log("父組件");
    },
    handleZk() {
      this.value2 = !this.value2;
      if (this.value2 == false) {
        this.marginLeft = "margin-left:0";
      }else{
         this.marginLeft = "margin-left:200px";
      }
    }
  }
};
</script>

<style scoped>
/* .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    } */
.content {
  margin: 20px;
}
#app .layout {
  margin-bottom: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

#app .ivu-layout-sider {
  padding-top: 60px;
  background: #3d4555;
}
/* .ivu-drawer-body{
  padding: 0px !important;
} */
</style>